<template>
    <view class="container">
        <view class="swiper-container">
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                :duration="duration">
                <swiper-item v-for="item in 4">
                    <FrogAvatar :src='src' shape="none"></FrogAvatar>
                </swiper-item>
            </swiper>
        </view>
        <view class="info">
            <view class="info-content">
                <view class="title">
                    【小卖部】超级大西瓜（3-6斤）
                </view>
                <view class="flex">
                    <view class="sales ">
                        <FrogTag size="mini">销量1000+</FrogTag>
                    </view>
                    <view class="inventory">
                        <FrogTag size="mini">库存:100</FrogTag>
                    </view>
                </view>
                <view class="price">
                    ￥ 39.3
                </view>
            </view>
            <view class="supplier">
                <view class="supplier-content flex">
                    <view class="supplier-photo">
                        <FrogAvatar :src='src' shape="spuare"></FrogAvatar>
                    </view>
                    <view class="supplier-info">
                        <view class="supplier-name">六级小卖部</view>
                        <view>5#</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="submit-bar">
            <FrogSubmitBar></FrogSubmitBar>
        </view>
    </view>
</template>

<script>
    import FrogAvatar from '../../../components/public/avatar/index.vue';
    export default {
        components: {
            FrogAvatar
        },
        data() {
            return {
                src: 'https://demos.themeselection.com/materio-vuetify-vuejs-admin-template/demo-1/images/avatars/avatar-1.png',
                id: '',
                indicatorDots: true,
                autoplay: true,
                interval: 2000,
                duration: 500
            }
        },
        methods: {

        },
        onLoad(options) {
            this.id = options.id;
        }
    }
</script>

<style>
    .swiper {
        height: 320px;
    }

    .info {
        padding: 0 10px;
    }

    .info-content {
        padding: 10px;
        /* border-bottom: 1px solid var(--color-line); */
    }

    .title {
        font-size: 22px;
    }

    .price {
        font-size: 22px;
        font-weight: 600;
        color: var(--color-theme);
    }

    .supplier-content {
        display: flex;
        border-top: 1px solid var(--color-line);
        border-bottom: 1px solid var(--color-line);
        padding: 8px 10px;

    }

    .supplier-photo {
        height: 120rpx;
    }

    .supplier-info {
        padding: 0 20px;
    }

    .supplier-name {
        font-size: 16px;
    }
</style>